<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div id="app">

        <nav class="nav">
            <a class="goback" href="javascript:history.back(1)"></a>
            会员登录
            <a href="#" class="more"></a>
        </nav>
        <section>
            <div>
                <input class="phone" placeholder="请输入您的手机号" id="memberPhone" v-model="list.memberPhone">
                <input class="password" placeholder="密码（6-18位数字和字母组合）" id="password" type="password" required
                    v-model="list.password">
            </div>
            <div>
                <button id="login" @click="login">登录</button>
            </div>
            <div>
                <a class="reg" href="#">免费注册</a>
                <a class="forgetPassword" href="#">忘记密码</a>
            </div>
        </section>
        <footer>
            <ul>
                <li>登录</li>
                <li>注册</li>
                <li>回首页</li>
            </ul>
            <div class="copyright">&copy;同程旅游</div>
        </footer>
    </div>

</body>

</html>

<script src="./js/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    new Vue({
        el: "#app",
        data: {
            list: {
                memberPhone: "",
                password: ""
            }
        },
        methods: {


            login() {
                var ploneType = /^[1][0-9]{10}$/
                var paswderType = /^[a-zA-Z0-9]{6,18}$/

                var that = this

                if (!ploneType.test(that.list.memberPhone)) {
                    // console.log("不正确");
                    confirm("手机号格式不正确")
                    return false
                }
                
                if(!paswderType.test(that.list.password)){
                    // console.log("不正确");
                    confirm("密码格式不正确")
                    return false
                }


                console.log("点击了");

                console.log('创建成功');
                if (that.list.memberPhone != "" && that.list.password != "") {
                    axios.post("http://localhost:8080/h9/travel/getMember", that.list)
                        .then(res => {
                            console.log(res);
                            if (res.status == 200 && res.data.success) {
                                confirm("登陆成功")

                            } else {
                                confirm("登陆失败")
                            }

                        })
                }

            }
        }
        // ,
        // created(){
        //     var that = this
        //     console.log('创建成功');
        //     axios.post("http://localhost:8080/h8/travel/list")
        //     .then(res=>{
        //         console.log(res);
        //         if(res.status==200&&res.data.success){
        //             console.log("成功");
        //             that.lists = res.data.list
        //             console.log(that.lists);
        //         }
        //     })
        // }
    })

</script>